<!-- 「个人中心」页面 -->
<template>
  <div class="my-container">
    <image
      class="bg"
      src="http://ustatic.hudongmiao.com/miao/activity/bg.png"
      mode="widthFix"
    />
    <div class="nav">
      <uni-nav-bar
        fixed
        status-bar
        title="个人中心"
        background-color="transparent"
        :border="false"
      />
    </div>
    <div class="body">
      <!-- 个人 -->
      <div
        class="person"
        :class="userInfo?.nickname?.length > 0 ? '' : 'not-login'"
        @click="clickPerson"
      >
        <!-- 头像 -->
        <div class="avatar">
          <image
            class="img"
            :src="
              userInfo?.avatar.length > 0
                ? userInfo.avatar
                : IMG_URL.DEFAULT_AVATAR
            "
            mode="aspectFill"
          />
        </div>
        <div v-if="userInfo.nickname.length === 0" class="please-login">
          请登录
        </div>
        <!-- 个人信息 -->
        <div v-if="userInfo?.nickname?.length > 0" class="name">
          {{ userInfo?.nickname }}
        </div>
        <div v-if="userInfo?.phone?.length > 0" class="phone">
          {{ userInfo?.phone.slice(0, 3) + "****" + userInfo?.phone.slice(7) }}
        </div>
        <div class="check-in-btn" @click.stop="clickCheckIn(currentInstance)">
          <!-- <image
            class="img"
            :src="IMG_URL_202405.CHECK_IN_BTN"
          /> -->
          {{ teamInviteCompetition?.isCheckIn ? "已签到" : "点击签到" }}
        </div>
        <uni-icons class="arrow" color="#0006" type="right" size="16" />
      </div>
      <!-- 功能板块 -->
      <div class="my-feature">
        <div
          class="my-gaining feature-item"
          @click="navigateTo('personal-peak-competition-score')"
        >
          <image
            class="left-icon"
            src="https://ustatic.hudongmiao.com/miao/activity/fire.png"
            mode="aspectFit"
          />
          <div class="mid-info">
            <div class="mid-data">
              {{ personalPeakCompetitionInfo?.score || 0 }}
            </div>
            <div class="mid-txt">欢乐赛积分</div>
          </div>
          <uni-icons type="right" color="#0006" size="16" />
        </div>
        <div
          class="my-video feature-item"
          @click="navigateTo('team-peak-competition-score')"
        >
          <image
            class="left-icon"
            src="https://ustatic.hudongmiao.com/miao/activity/manGoup.png"
            mode="widthFix"
          />
          <div class="mid-info">
            <div class="mid-data">
              {{ teamInviteCompetition?.score || 0 }}
            </div>
            <div class="mid-txt">团队赛积分</div>
          </div>
          <uni-icons type="right" color="#0006" size="16" />
        </div>
      </div>
      <div class="my-team" @click="clickMyTeam">
        <image :src="IMG_URL_202405.PEOPLE_BLUE" class="icon" />
        <div class="title">我的团队</div>
        <div class="tip">（组建8人团队可获2000积分）</div>
        <image
          class="arrow"
          src="@/static/icons/common/arrow.png"
          mode="aspectFill"
        />
      </div>
      <!-- 菜单 -->
      <div class="menu-container-1">
        <div
          v-for="(menu, index) in MENU_LIST_1"
          :key="index"
          class="menu"
          @click="menuClickHandle(menu.label)"
        >
          <button
            v-if="menu.label === 'invite-friends'"
            open-type="share"
            class="hidden-btn"
          />
          <image class="icon" :src="menu.icon" />
          <div class="name">
            {{ menu.name }}
          </div>
          <div class="text">
            {{ menu?.text || "" }}
          </div>
          <image
            class="arrow"
            src="@/static/icons/common/arrow.png"
            mode="aspectFill"
          />
        </div>
      </div>
      <div class="menu-container-2">
        <div
          v-for="(menu, index) in MENU_LIST_2"
          :key="index"
          class="menu"
          @click="menuClickHandle(menu.label)"
          @longpress="menuLongPressHandle(menu.label)"
        >
          <button
            v-if="menu.label === 'contact-service'"
            open-type="contact"
            class="hidden-btn"
          />
          <image class="icon" :src="menu.icon" />
          <div class="name">
            {{ menu.name }}
          </div>
          <image
            class="arrow"
            src="@/static/icons/common/arrow.png"
            mode="aspectFill"
          />
        </div>
      </div>
      <ToLoginMask v-if="!isLogin" />
    </div>
  </div>
  <!-- 确认实名认证弹窗 -->
  <with-mask v-if="false" :is-show="isShow">
    <div class="dialog">
      <div class="photo-placeholder">
        <image
          class="img"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/my-placeholder-photo.png"
          mode="aspectFill"
        />
      </div>
      <div class="confirm-text">
        <checkbox class="checkbox" :checked="false" value="cb" />
        <p class="first-p">
          我同意上海嗨喵科技有限公司使用我所提交的信息用于实名认证。
        </p>
        <p class="second-p">
          查看
          <span class="agreement" @click="navigateTo('user-service-agreement')"
            >用户服务协议</span
          >
          及
          <span class="agreement" @click="navigateTo('privacy-policy')"
            >隐私政策</span
          >
        </p>
      </div>
      <button class="confirm-btn" @click="confirm">确定</button>
      <span
        class="later"
        @click="
          () => {
            isShow = false;
          }
        "
        >下次再说</span
      >
    </div>
  </with-mask>
  <CustomTabBar />
  <CheckInSuccessPopup ref="checkInSuccessPopup" />
  <CreateTeamPopup ref="createTeamPopup" @confirm="onCreateTeamConfirm" />
  <RulesPopup
    ref="rulesPopup"
    :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202405"
    :title-img="IMG_URL_202405.RULE_TITLE"
  />
</template>

<script lang="ts" setup>
import CheckInSuccessPopup from "@/components/CheckInSuccessPopup.vue";
import CreateTeamPopup from "@/components/CreateTeamPopup.vue";
import CustomTabBar from "@/components/CustomTabBar.vue";
import ToLoginMask from "@/components/ToLoginMask.vue";
import Activity202310RulesPopup from "@/components/activity-202310/Activity202310RulesPopup.vue";
import RulesPopup from "@/components/activity-202405/RulesPopup.vue";
import { IMG_URL as IMG_URL_202405 } from "@/static/constant/activity-202405-constant";
import { ACTIVITY_RULE_KEY, IMG_URL } from "@/static/constant/view-constant";
import { useActivity202310 } from "@/stores/activity-202310-store";
import { useUser } from "@/stores/user";
import {
  clickCheckIn,
  inviteFriend,
  onCreateTeamConfirm,
} from "@/utils/activity-202310-utils";
import { navigateTo } from "@/utils/navigate";
import { requestSubscribeMessage } from "@/utils/tools";
import { storeToRefs } from "pinia";

const currentInstance = getCurrentInstance();
const rulesPopup = ref<InstanceType<typeof Activity202310RulesPopup>>();

const user = useUser();
const { userInfo, isLogin } = storeToRefs(user);
const { getInfo } = user;

const activity202310Store = useActivity202310();
const {
  setPersonInfo202310,
  setPersonalPeakCompetitionRankList,
  setTeamInviteCompetitionData,
} = activity202310Store;
const { personInfo202310, personalPeakCompetitionInfo, teamInviteCompetition } =
  storeToRefs(activity202310Store);

// 点击tab时通知订阅
onTabItemTap(() => {
  requestSubscribeMessage();
});

onShow(() => {
  // 获取用户信息
  getInfo();
});

// 点击个人信息
const clickPerson = () => {
  // 如果有userInfo，说明已经登录，跳转到编辑个人信息页面
  if (userInfo?.value?.nickname?.length > 0) {
    uni.navigateTo({ url: "/subpkg/edit-profile/edit-profile" });
    return;
  }
  // 如果没有userInfo，说明没有登录，跳转到登录页面
  uni.navigateTo({ url: "/subpkg/login/login" });
};

// 实名认证弹窗显示状态
const isShow = ref(false);

// 实名认证弹窗点击确定
const confirm = () => {
  isShow.value = false;
  // uni.navigateTo({ url: '/subpkg/auth-real-name/auth-real-name' });
};

// #region 个人巅峰赛信息、团队邀请赛信息相关

/** 检查并获取相关数据 */
const checkAndGetInfo = async () => {
  setPersonInfo202310();
  // 检查是否有个人巅峰赛信息
  if (!personalPeakCompetitionInfo.value) {
    setPersonalPeakCompetitionRankList();
  }
  // 检查是否有团队邀请赛信息
  if (!teamInviteCompetition.value) {
    setTeamInviteCompetitionData();
  }
};

onShow(() => {
  checkAndGetInfo();
});

// #endregion

// #region 菜单相关

/** 「我的团队」菜单项点击事件 */
const clickMyTeam = () => {
  if (personInfo202310.value.isJoinTeam) {
    navigateTo("my-team");
    return;
  }
  navigateTo("my-team-no-team");
};

const MENU_LIST_1 = [
  {
    name: "分销伴手礼娃娃",
    icon: IMG_URL.HAND,
    label: "sell-dolls",
    text: "团队赛奖励500积分",
  },
  {
    name: "邀请好友",
    icon: "/static/icons/my/invite-friends.png",
    label: "invite-friends",
    text: "邀请1位嗨喵好友奖励50积分",
  },
] as const;

const MENU_LIST_2 = [
  {
    name: "活动规则",
    icon: "/static/icons/my/activity-rule.png",
    label: "activity-rule",
  },
  {
    name: "联系客服",
    icon: "/static/icons/my/contact-service.png",
    label: "contact-service",
  },
  {
    name: "关于我们",
    icon: "/static/icons/my/about-us.png",
    label: "about-us",
  },
] as const;

type MenuLabel =
  | (typeof MENU_LIST_1)[number]["label"]
  | (typeof MENU_LIST_2)[number]["label"];

// 菜单点击事件
const menuClickHandle = (menuLabel: MenuLabel) => {
  switch (menuLabel) {
    case "invite-friends":
      break;
    case "sell-dolls":
      uni.navigateTo({ url: "/subpkg/mall/prodList/prodList" });
      break;
    case "activity-rule":
      console.log("activity-rule", rulesPopup.value);
      rulesPopup.value?.open();
      break;
    case "about-us":
      navigateTo("AboutUs");
      break;
    default:
      break;
  }
};

/** 菜单长按事件 */
const menuLongPressHandle = (menuLabel: MenuLabel) => {
  switch (menuLabel) {
    case "about-us":
      navigateTo("test");
      break;
    default:
      break;
  }
};
// #endregion
onShareAppMessage(inviteFriend);
</script>

<style lang="scss">
$person-text-color: #333;

.my-container {
  width: 100vw;
  height: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;

  $title-height: 40px;

  .nav {
    width: 100%;
  }

  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100%;
  }

  // 状态栏
  .status-bar {
    width: 100%;
    height: var(--status-bar-height);
  }

  // 标题
  .title {
    width: 100%;
    height: $title-height;

    font-size: 17px;
    line-height: $title-height;
    text-align: center;
  }

  // 主体
  .body {
    width: 100%;

    padding: 8px 16px calc($tabBarHeight + env(safe-area-inset-bottom) + 8px)
      16px;
    display: grid;
    grid-template:
      "person" min-content
      "." 20px
      "my-feature" min-content
      "." 14px
      "my-team" min-content
      "." 24px
      "menu-container-1" min-content
      "." 16px
      "menu-container-2" min-content
      / 1fr;

    // 个人
    .person {
      grid-area: person;

      width: 100%;
      height: 19.2vw;

      display: grid;
      grid-template:
        "avatar name check-in-btn arrow" 1fr
        "avatar phone check-in-btn arrow" 1fr
        / min-content 1fr min-content min-content;
      column-gap: 12px;
      align-items: center;

      color: $person-text-color;

      &.not-login {
        grid-template:
          "avatar please-login check-in-btn arrow" 1fr
          / min-content 1fr max-content min-content;
      }

      .please-login {
        grid-area: please-login;
        justify-self: start;

        font-size: 18px;
      }

      // 头像
      .avatar {
        grid-area: avatar;

        width: 72px;
        height: 72px;
        overflow: hidden;

        border: 2px solid #fff;
        border-radius: 50%;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      // 姓名
      .name {
        grid-area: name;
        align-self: end;

        font-size: 18px;
        color: $person-text-color;
      }

      .check-in-btn {
        grid-area: check-in-btn;

        position: relative;

        padding: 8px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        font-size: min(12px, 3vw);
        color: #fff;

        background: linear-gradient(270deg, #864ce4 0%, #272fd9);
        border: 2rpx solid #cbe0f9;
        border-radius: 108rpx;
        // 禁止文字换行
        white-space: nowrap;

        .img {
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;

          width: 100%;
          height: 100%;
        }
      }

      // 手机号码
      .phone {
        grid-area: phone;
        align-self: start;

        font-size: 15px;
        color: $person-text-color;
      }

      // 箭头
      .arrow {
        grid-area: arrow;
      }
    }

    .my-feature {
      grid-area: my-feature;
      margin-bottom: 16.0004px;

      width: 100%;

      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 10px;
      align-items: center;
      justify-content: center;

      .feature-item {
        width: 100%;

        background-color: #fff;
        box-shadow: 2rpx 4rpx 8rpx 0px rgba(255, 255, 255, 0.5) inset;
        border-radius: 16.0004px;

        padding: 10px 7.9976px;
        padding-left: 12.0016px;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-start;

        &:last-of-type {
          background-color: #fff;
        }

        .left-icon {
          width: 69rpx;
          height: 69rpx;
        }

        .mid-info {
          margin: 0 5.2px;
          margin-left: 9.88px;

          overflow: hidden;
          flex: 1;

          color: $person-text-color;
          white-space: nowrap;

          .mid-data {
            // font-size: 22.0012px;
            font-size: min(22px, 5vw);
          }

          .mid-txt {
            // font-size: 15.002px;
            font-size: min(15px, 4vw);
          }
        }
      }
    }

    .my-team {
      grid-area: my-team;

      width: 100%;
      height: 60px;

      background: #fff;
      border-radius: 10px;

      padding: 0 14px;
      display: grid;
      grid-template:
        "icon title tip arrow" 1fr
        / 24px max-content 1fr 12px;
      column-gap: 9px;
      align-items: center;

      .icon {
        width: 24px;
        height: 24px;
      }

      .title {
        font-size: 12px;
        color: #333;
        text-align: right;
      }

      .tip {
        font-size: 14px;
        color: #8d8d8d;
      }

      .arrow {
        width: 12px;
        height: 12px;
      }
    }

    .menu-container-1 {
      grid-area: menu-container-1;
    }

    .menu-container-2 {
      grid-area: menu-container-2;
    }

    // 菜单
    .menu-container-1,
    .menu-container-2 {
      width: 100%;

      background-color: #fff;
      border-radius: 9.9996px;
      box-shadow: 3.9988px 3.9988px 19.9992px 0 rgb(0 0 0 / 5%);

      .menu {
        position: relative;

        width: 100%;
        height: 56px;

        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .icon {
          margin-right: 9.0012px;

          width: 23.998px;
          height: 23.998px;
        }

        .name {
          flex: 1;

          font-size: 14px;
        }

        .text {
          margin-right: 9.0012px;

          font-size: 12px;
          color: #8d8d8d;
        }

        .arrow {
          width: 12.0016px;
          height: 12.0016px;
        }

        .hidden-btn {
          position: absolute;

          width: 100%;
          height: 55.9988px;

          background-color: transparent;

          &::after {
            border: none;
          }
        }
      }
    }
  }
}

// 确认实名认证弹窗
.dialog {
  width: calc(73.8462vw - 20px);

  background-color: #fff;
  border-radius: 16px;

  padding: 10px;
  display: grid;
  grid-template-areas:
    "photo-placeholder"
    "confirm-text"
    "confirm-btn"
    "later";
  grid-template-rows: 3fr 2fr 1fr 1fr;
  align-items: center;

  // 占位图片
  .photo-placeholder {
    align-self: center;
    justify-self: center;

    width: 62.5641vw;
    height: 34.1026vw;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  // 提示文字
  .confirm-text {
    width: 100%;

    display: grid;
    grid-template-areas:
      "checkbox first-p"
      "checkbox second-p";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 30px 1fr;

    font-size: 13px;
    color: #333;

    // 勾选框
    .checkbox {
      align-self: start;
      justify-self: left;

      transform: scale(0.6);
    }

    // 第一段
    .first-p {
      grid-area: first-p;
    }

    // 第二段
    .second-p {
      grid-area: second-p;

      .agreement {
        color: #27ae60;
      }
    }
  }

  // 确定按钮
  .confirm-btn {
    width: 218px;
    height: 42px;

    background: #ff2459;
    border-radius: 4px;

    font-size: 16px;
    color: #fff;
  }

  // 下次再说
  .later {
    display: flex;
    justify-content: center;

    font-size: 13px;
    color: rgb(0 0 0 / 40%);
  }
}
</style>
